<style>
    .head-box {
        width: 100%;
        background-color: #031368;
        color: #ffffff;
        box-sizing: border-box;
        padding: 20px 0;
        position: fixed;
        top: 0;
        z-index: 999;
        transition: all 0.1s;
    }

    .head-box-w {
        background-color: #ffffff !important;
        color: #000000 !important;
        box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
    }

    .head-content {
        max-width: var(--max-width);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo-img,
    .logo-img-w {
        height: 40px;
        transition: height 0.3s;
        cursor: pointer;
    }

    .menu-box {
        display: flex;
        align-items: center;
        gap: 20px;
        cursor: pointer;
        box-sizing: border-box;
        padding-right: 20px;
    }

    .menu-box>.menu-item {
        box-sizing: border-box;
        padding: 5px 10px;
        border-radius: 3px;
        transition: all 0.3s;
    }

    .menu-box>.menu-item:hover {
        background-color: #1DA9F8;
        color: #ffffff;
    }

    .more-icon {
        display: none;
        font-size: 20px;
        cursor: pointer;
        margin-right: 20px;
    }

    .active-menu {
        background-color: #1DA9F8;
        color: #ffffff;
    }

    @media screen and (max-width:1290px) {

        .logo-img,
        .logo-img-w {
            margin-left: 20px;
        }
    }

    @media screen and (max-width:900px) {

        .logo-img,
        .logo-img-w {
            height: 30px !important;
            margin-left: 20px;
        }

        .menu-box {
            display: none;
        }

        .more-icon {
            display: block;
        }
    }
</style>



<div id="headBox" class="head-box">
    <div class="head-content">
        <img class="logo-img" src="../imgs/logo3.png" alt="" onclick="toHome()">
        <img class="logo-img-w" src="../imgs/logo4.png" alt="" onclick="toHome()">
        <div id="menuBox" class="menu-box"></div>
        <i class="layui-icon layui-icon-more-vertical more-icon demo-dropdown-base"></i>
    </div>
</div>


<script>
    const menuList = [
        {
            title: '首页',
            jumpUrl: "/index.html",
            assUrl: [
                '/'
            ],
        },
        {
            title: '产品中心',
            jumpUrl: "/page/product.html",
            assUrl: [
                '/page/anquanDetail.html'
            ],
        },
        {
            title: '服务支持',
            jumpUrl: '/page/serviceSupport.html',
            assUrl: [
                '/page/serviceSupportDetail.html'
            ],
        },
        {
            title: '行业解决方案',
            jumpUrl: '/page/solution.html',
            assUrl: [
                '/page/jiejueDetail.html'
            ],
        },
        {
            title: '应用案例',
            jumpUrl: '/page/case.html',
            assUrl: [
                '/page/caseDetail.html'
            ],
        },
        // {
        //     title: '新闻动态',
        //     jumpUrl: '/page/news.html',
        //     assUrl: [
        //         '/page/newsDetail.html'
        //     ],
        // },
        {
            title: '关于我们',
            jumpUrl: '/page/aboutUs.html',
            children: [
                {
                    title: '关于全讯物联',
                    jumpUrl: '/page/aboutUs.html',
                }
            ],
            assUrl: [
                '/page/recruit.html'
            ],
        },
    ]

    $('.logo-img-w').hide()

    layui.use(function () {
        var dropdown = layui.dropdown;
        dropdown.render({
            elem: '.demo-dropdown-base',
            data: menuList,
            click: function (obj) {
                menuHandle(obj.jumpUrl)
            }
        })
    })

    function appendDom(dom, toDom, item = {}) {
        toDom.append(dom)
        setTimeout(() => {
            var dropdown = layui.dropdown;
            dropdown.render({
                elem: '.dropdown-menu',
                data: item.children,
                click: function (obj) {
                    menuHandle(obj.jumpUrl)
                }
            })
        }, 1000);
    }

    function setMenu(id, menuList, toDom) {
        menuList && menuList.map((item, index) => {
            let activeClass = ''
            if (location.pathname.indexOf(item.jumpUrl) > -1 || item.assUrl.includes(location.pathname)) {
                activeClass = 'active-menu'
            }
            let dom = `
            <div id="${id + index}" class='menu-item ${activeClass}' onclick="menuHandle('${item.jumpUrl}')">${item.title}</div>
            `

            // if (item.children && item.children.length > 0) {
            //     dom = `
            //         <div id="${id + index}" class='menu-item ${activeClass} dropdown-menu' lay-options="{trigger: 'hover'}">${item.title} <i class="layui-icon layui-icon-down layui-font-12"></i></div>
            //     `
            // }
            appendDom(dom, toDom, item)
        })
    }

    function scrollMove(e) {
        if (window.scrollY > 0) {
            $('.head-box').addClass('head-box-w')
            $('.logo-img').hide()
            $('.logo-img-w').show()
        } else {
            $('.head-box').removeClass('head-box-w')
            $('.logo-img').show()
            $('.logo-img-w').hide()
        }
    }

    if ((location.pathname.indexOf('/index.html') > -1) || (location.pathname == '/')) {
        window.addEventListener('scroll', scrollMove)
    } else {
        $('.head-box').addClass('head-box-w')
        $('.logo-img').hide()
        $('.logo-img-w').show()
    }

    setMenu('menu', menuList, $('#menuBox'))

    function toHome() {
        location.href = '/index.html'
    }

    function menuHandle(jumpUrl) {
        location.href = jumpUrl
    }
</script>